﻿<template>
      <!--send box s-->
  <div class="reginster_wrap">
    <mt-button @click.native="popupVisible3 = true" size="large" ref="click_pop" class="hide">右侧弹出 popup</mt-button>
    <div class="finish_msg_title">
      完善资料
    </div>
    <div class="input_base input_base_top" placeholder="" v-on:click.self="pop_show($event)" ref="school">
      {{select_school}}
    </div>

    <input class="input_base" placeholder="绑定手机号" type="number" ref="phone"/>
    <input class="input_base" placeholder="设置密码" ref="sec" type="password"/>
    <p class="input_list">
      点击下一步表示同意《用户协议》
    </p>
    <div class="next_step" v-on:click="next_f">下一步</div>
    <mt-popup v-model="popupVisible3" position="right" class="mint-popup-3 pop_wraper" :modal="false">
      <input class="input_base pop_search" placeholder="输入学校"
             v-on:blur.self="seach($event)" ref="search_vale"
             v-focus_ud:value='popupVisible3'
      />
      <div class="show_search_box" v-for="info in menu_list" v-on:click.self="change_address($event,info.id)">
        {{info.schoolName}}
        <div v-if="(info.length == 0)">
          没有匹配的消息
        </div>
      </div>
      <mt-button @click.native="popupVisible3 = false" size="large" type="primary" class="close_pop">返回</mt-button>
    </mt-popup>
    <Loading v-show="isloading" v-on:click.self="loading_hide" class="load"></Loading>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Popup, MessageBox } from 'mint-ui';
  import Loading from "../../components/loading.vue";
  import qs from "qs";
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      popupVisible3:false,
      menu_list: [],
      select_school: "输入学校",
      school_id: "",
      isloading: false
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  mounted: function () {
   
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (to.path == "/Index_main/Wrap_certain_layer/Certain_layer" && this.popupVisible3 == true) {
      this.popupVisible3 = false;
      next(false)

    } else {
      next(true)
    }
  },
  components: {
    Loading
  },
  methods: {
    ...mapMutations([
      "Change_user"
    ]),
    seach: function (e) {
      if (e.target.value == "") return;
      this.isloading = false;
      this.$http.post('/api/user/school/getSchoolByName',
        qs.stringify(
        {
            name: e.target.value,
        }))
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
          this.isloading = false;
        }).then((e) => {
          this.menu_list = e.data;
          this.isloading = false;
        })
    },
    change_address: function (e,id) {
      this.select_school = e.target.innerText;
      this.popupVisible3 = false;
      this.school_id = id;
    },
    pop_show: function (event) {
      this.$refs.click_pop.$el.click();
      this.$refs.click_pop.$el.blur();
      this.menu_list = [];
      this.$refs.search_vale.value = "";
      setTimeout(() => {
        this.$refs.search_vale.focus();
      },0)
    },
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    login:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goto_register:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Login/Register",router:this.$router
        });
    },
    next_f: function () {
      let phone = this.$refs.phone.value
      let sec = this.$refs.sec.value
      let school = this.$refs.school.innerText;
      if (school == "" || school == "输入学校") {
        Toast("请输入学校");
        return false;
      }
      else if (this.$refs.phone.value == "") {
        Toast("请输入手机号");
        return false;
      } else if (!(/^1[34578]\d{9}$/.test(phone))) {
        Toast("手机号码有误，请重填");
        return false; 
      } else if (sec == "") {
        Toast("请输入密码");
        return false;
      }
      //设置user 提交
      this.Change_user({
        "phone": phone,
        "pwd": sec,
        "school.id":this.school_id,
        "school_name": school
      })
      this.$emit('change_bg'); 
      this.$store.dispatch("thom_redirect",
        {
          name: "/Wrap_login/Finisth_msg_2", router: this.$router
        });
    },
  
  }
}
</script>
<style>
  .mint-indicator-mask {
    z-index: 3000;
  }
</style>
<style scoped>
  @component-namespace page {
    @component indicator {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);
        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .load {
    position: absolute;
    top: 0;
    z-index:4000;
  } 
  .mint-button {
    border-radius: 0;
  }
  .show_search_box {
    width: 80%;
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    font-size: 0.6rem;
    border-bottom: 1px solid #9f5c2f;
    margin: 0.2rem auto;
    letter-spacing: 1px;
  } 
  .mint-popup .pop_search {
    border-radius: 0;
    padding: 0;
    padding-left: 6%;
    // box-shadow: 0 2px 6px 2px #9f5c2f;
    width: 94%;
    border-bottom: 2px solid #9f5c2f;
    margin: 0;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    color: #9f5a30;
    letter-spacing:1px;
  }
  /*close_pop s*/
  .close_pop {
    background-color:#9f5c2f;
    position: fixed;
    bottom: 0;
  }
  /*close_pop e*/
  /*pop_wraper s*/
  .hide {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
  } 
  .pop_wraper {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  /*pop_wrapper e*/
  /*finish_msg s*/
  .login_wrap .login_header_left {
    margin: 1rem 0 0 6%;
  } 
  .login_wrap .login_header_right {
    margin: 0.8rem 6% 0 0;
  } 
  .next_step {
    width: 86%;
    height: 1.75rem;
    line-height: 1.75rem;
    background-color: #9f5c2f;
    color: #fff;
    margin: 0 auto;
    border-radius: 2vw;
    font-size: 0.7rem;
  } 
  .input_list {
    margin-bottom: 0.8rem;
    text-align: center;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
  }
  .reginster_wrap .input_base_top {
    color: #9f5c2f;
    text-align: left;
    //padding-left:6%;
    font-weight: 600;
    height:2rem;
    line-height:2rem;
  } 
  .input_base::-webkit-input-placeholder {
    color: #9f5c2f;
    text-align: left;
    font-weight: 600;
    padding-left: 0%;
  }

  .input_base:-moz-placeholder {
    text-align: left;
    color: #9f5c2f;
    font-weight: 600;
    padding-left:0%;
  }

  .input_base:-ms-input-placeholder {
    text-align: left;
    /* IE10+ */
    color: #9f5c2f;
    font-weight: 600;
    padding-left:0%;
  }
  .input_base {
    padding:0;
    padding-left:6%;
    border: 0;
    outline: none;
    display: block;
    width: 80%;
    height: 2rem;
    line-height: 2rem;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0 auto 0.5rem;
    font-size:0.6rem;
    color:#9f5c2f;
  } 
  .finish_msg_title {
    width: 37%;
    height: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
    color: #9f5a30;
    font-size: 0.7rem;
    background-color: #fff;
    margin: 0.6rem auto 1.1rem;
    border-radius: 2vw;
    letter-spacing: 1px;
    font-weight: 700;
  } 
 /*finish_msg e*/
  .reginster_wrap {
    width: 100%;
    height: 100%;
  }
.certain_btn_inner{
  border:2px solid #9f5c2f;
  width: 86%;
  height: 2rem;
  line-height: 2rem;
  color: #ffffff;
  background-color: #9f5c2f;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
}
.inner_main_input{
  padding-right:6%;
  width: 74%;
}
*::-webkit-input-placeholder {
  text-align: center;
}

*:-moz-placeholder {
  text-align: center;
}

*:-ms-input-placeholder {
  text-align: center;
}

/*bottom_btn*/
.bottom_btn{
  width: 8rem;
  transform:translateX(-50%) ;
  position: absolute;
  bottom: 1.85rem;
  left:50%;
}

.bottom_left_btn{
  float: left;
  width: 3.5rem;
  height: 1rem;
  line-height:1.8;
  text-align: center;
  color: #9f5c2f;
  font-size: 0.6rem;
  background-color: #ffffff;
  border-radius: 1.4vw;
  letter-spacing: 1px;
}
.mid_line{
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  float: left;
  width: 2px;
  background-color: #9f5c2f;
}
</style>

